<template>
  <div class="greatdizi">
    <div class="top">
      <router-link to="" @click.native="fanHui()">&lt;</router-link>
      <div class="top_title">地址信息</div>
    </div>
    <div class="add_xinxi">
      <ul>
        <li>
          <!-- <span class="sJ" v-show="flag">请输入2-8个任意字符</span> -->
          <span>收件人</span>
          <input
          placeholder="请输入2-8个任意字符"
            autocomplete="off"
            type="text"
            name="shoujian"
            v-model="val"
            @input="shiJiao()"
            @focus="shouJian()"
            @blur="shiJiao()"
            minlength="2"
            maxlength="8"
          />
          <span class="yhm" v-show="flag2">用户名格式错误</span>
        </li>
        <li>
          <span>电话</span>
          <input
            type="text"
            name="iphone"
            autocomplete="off"
            v-model="phone"
            oninput="value=value.replace(/[^\d]/g,'')"
            maxlength="11"
            @input="test()"
            @blur="test()"
          />
          <span class="dh" v-show="flag3">手机号输入错误</span>
        </li>
        <li>
          <div class="left">
            <span>所在地区</span>
          </div>
          <div class="right r">
            <div class="city" @click="toAddress">{{ city }}</div>
            <i class="arrow-r"> </i>
          </div>
          <v-distpicker type="mobile" @selected="selected" v-show="addInp">
          </v-distpicker>
          <div class="mask" v-show="mask"></div>
        </li>
        <li>
          <span>详细地址</span>
          <input type="text" name="xiang_xi" autocomplete="off" v-model="xxDz" maxlength="25" />
        </li>
        <li>
          <span>设置为默认地址</span>
          <div class="switch">
            <div class="switch-bg" :class="{ on: cur == 1 }">
              <label for="mo_r">
                <div
                  class="switch-btn"
                  :class="{ on: cur == 1 }"
                  @click="openSwitch"
                ></div>
              </label>
              <input type="checkbox" name="mo_r" id="mo_r" autocomplete="off" />
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="bao_cun">
      <ul>
        <li>
          <router-link to="" @click.native="baoCun()">保存并使用</router-link>
        </li>
        <li>
          <router-link to="/Address">取消</router-link>
        </li>
      </ul>
    </div>

    <div v-show="flag4" class="tishi">{{ tsDq }}</div>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";
export default {
  components: { VDistpicker },
  data() {
    return {
      flag: false,
      flag2: false,
      flag3: false,
      phone: "",
      val: "",
      city: "请选择",
      addInp: false,
      mask: false,
      cur: 0,
      xxDz: "",
      tsDq: "",
      flag4: false,
      id: this.$route.params.id,
      num: "",
    };
  },
  methods: {
    fanHui() {
      window.history.go(-1);
    },
    toAddress() {
      this.mask = true;
      this.addInp = true;
    },
    // 省市区三级联动
    selected(data) {
      this.mask = false;
      this.addInp = false;
      this.city =
        data.province.value + " " + data.city.value + " " + data.area.value;
      // console.log(this.city);
    },
    openSwitch: function () {
      this.cur = !this.cur;
    },
    shouJian() {
      this.flag = true;
    },
    shiJiao() {
      this.flag = false;
      if (this.val.length < 2) {
        this.flag2 = true;
      } else {
        this.flag2 = false;
      }
    },
    test() {
      const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (
        this.phone == "" ||
        this.phone.length <= 10 ||
        !reg.test(this.phone)
      ) {
        this.flag3 = true;
      } else {
        this.flag3 = false;
      }
    },
    baoCun() {
      // /Address
      if (this.id == 1) {
        if (!this.flag2 && !this.flag3 && this.city != "" && this.xxDz != "") {
          var obj = {
            name: this.val,
            phone: this.phone,
            city: this.city,
            dizi: this.xxDz,
            flag: this.cur,
          };
          this.$axios
            .post("http://47.114.130.21:3000/dizi", {
              params: {
                id: localStorage.getItem("id"),
                id1: this.id,
                dizi: obj,
              },
            })
            .then((data) => {
              if (data.data.code == 200) {
                this.$router.push("/Address");
              }
            });
        } else {
          if (this.city == "" || this.xxDz == "") {
            this.tsDq = "请选择所在地区和详细地址";
          }
          this.flag4 = true;
          setTimeout(() => {
            this.flag4 = false;
          }, 500);
        }
      }
      if(this.id==2){
        if (!this.flag2 && !this.flag3 && this.city != "" && this.xxDz != "") {
          var obj = {
            name: this.val,
            phone: this.phone,
            city: this.city,
            dizi: this.xxDz,
            flag: this.cur,
          };
          this.$axios
            .post("http://47.114.130.21:3000/bianji", {
              params: {
                id: localStorage.getItem("id"),
                num:this.num,
                dizi: obj,
              },
            })
            .then((data) => {
              if (data.data.code == 200) {
                this.$router.push("/Address");
              }
            });
        } else {
          if (this.city == "" || this.xxDz == "") {
            this.tsDq = "请选择所在地区和详细地址";
          }
          this.flag4 = true;
          setTimeout(() => {
            this.flag4 = false;
          }, 500);
        }
      }
    },
  },
  mounted() {
    if (this.id == 2) {
      this.num = this.$route.params.num;
      this.$axios
        .post("http://47.114.130.21:3000/dizi", {
          params: {
            id: localStorage.getItem("id"),
            id1: this.id,
            num: this.num,
          },
        })
        .then((data) => {
          if (data.data.code == 200) {
            if(data.data.msg[0].dizi.flag){
              this.cur=data.data.msg[0].dizi.flag
            }
            this.val = data.data.msg[0].dizi.name;
            this.phone = data.data.msg[0].dizi.phone;
          }
        });
    }
  },
  watch: {},
};
</script>


<style lang="less" scoped>
.tishi {
  position: absolute;
  left: 50%;
  top: 30%;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.266667rem 0.4rem;
  transform: translateX(-50%);
  border-radius: 5px;
  color: #fff;
  font-size: 15px;
  text-align: center;
}
.add_xinxi {
  margin-top: 45px;
  padding: 0px 0.133333rem;
  background: #ffffff;
  > ul {
    display: flex;
    flex-flow: column;
    > li:not(:last-child) {
      border-bottom: 1px solid #eeeeee;
      padding: 0.4rem 0.266667rem;
      display: flex;
      justify-content: space-between;
      width: 100%;
      > span {
        display: block;
        width: 20%;
        font-size: 15px;
        color: #666666;
      }
      > input {
        font-size: 15px;
        width: 80%;
        border: none;
        outline: none;
        text-indent: 0.266667rem;
        color: #999;
      }
      .left {
        font-size: 15px;
        color: #666666;
      }
      .right {
        font-size: 15px;
        color: #999;
      }
      .sJ {
        top: 1.226667rem;
        position: absolute;
        width: 35%;
        left: 20%;
        font-size: 12px;
        background: rgba(204, 204, 204, 0.5);
        color: #000;
        text-align: center;
        border-radius: 5px;
      }
      .yhm {
        border-radius: 5px;
        position: absolute;
        width: 26%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: #fff;
        background: rgba(0, 0, 0, 0.3);
        text-align: center;
        top: 2.213333rem;
      }
      .dh {
        border-radius: 5px;
        position: absolute;
        width: 26%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: #fff;
        background: rgba(0, 0, 0, 0.3);
        text-align: center;
        top: 3.56667rem;
      }
    }
    > :last-child {
      border-bottom: 1px solid #eeeeee;
      padding: 0.4rem 0.266667rem;
      display: flex;
      justify-content: space-between;
      width: 100%;
      > span {
        display: block;
        width: 40%;
        font-size: 15px;
        color: #666666;
      }
    }
  }
}
.bao_cun {
  padding: 0px 0.533333rem;
  > ul {
    > li {
      border-radius: 4px;
      margin: 0.533333rem 0px;
      > a {
        border-radius: 3px;
        text-align: center;
        width: 100%;
        height: 0.933333rem;
        line-height: 0.933333rem;
        display: block;
        font-size: 14px;
      }
    }
    > :first-child {
      > a {
        background: #000000;
        color: #fff;
      }
    }
    > :last-child {
      > a {
        background: #ffffff;
        color: #000;
      }
    }
  }
}

.switch {
  border-radius: 50px;
  border: 1px solid #efefef;
  position: relative;
}
.switch-btn {
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 50%;
  border: 1px solid #efefef;
  position: absolute;
  background-color: #fff;
  top: 50%;
  left: -2px;
  transform: translateY(-50%);
  transition: left 0.5s;
}
.switch-bg {
  background-color: #999999;
  width: 1.333333rem;
  height: 0.533333rem;
  border-radius: 50px;
  transition: width 0.5s;
  > label {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  > input {
    display: none;
  }
}
.switch-btn.on {
  left: 0.8rem;
}
.switch-bg.on {
  background: #fd9152;
}
</style>